<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { userApi } from '@/apis/UserApi'
import { useUserStore } from '@/store/userStore'
import { useLoginStore } from '@/store/loginStore'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const loginStore = useLoginStore()

const userName = ref('')
const password = ref('')
const signupUserName = ref('')
const signupPassword = ref('')


async function login() {
    if (!userName.value) {
        ElMessage.error('用户名不能为空');
        return;
    }
    if (!password.value) {
        ElMessage.error('密码不能为空');
        return;
    }
    await userApi.login({
        userName: userName.value,
        password: password.value
    }).then((res) => {
        if (res.code === 200 && res.data) {//响应拦截器会拦截
            userStore.setUserInfo(res.data)
            loginStore.setLoginInfo({
                isLogin: true,
                isAdmin: res.data.userId === 14787164048664
            })
            ElMessage.success('登录成功')
        }
        toggleLogin(loginStore.loginInfo?.isLogin)
        toggleAdmin(loginStore.loginInfo?.isAdmin)
    });
}

async function register() {
    if (!signupUserName.value) {
        ElMessage.error('注册用户名不能为空');
        return;
    }
    if (!signupPassword.value) {
        ElMessage.error('请输入注册密码');
        return;
    }
    await userApi.register({
        userName: signupUserName.value,
        password: signupPassword.value
    }).then((res) => {
        if (res.code === 200) {
            ElMessage.success('注册成功')
            setupToggle()
        }
    });
}

const getSelector = (ele: string): HTMLElement | null => {
    return document.querySelector(ele);
};

// 登录注册载入
const containerShow = () => {
    const show = getSelector('.container');
    if (show) {
        show.className += ' container-show';
    }
};

// 登录注册页切换
const setupToggle = () => {
    const toSignBtn = getSelector('.toSign');
    const toLoginBtn = getSelector('.toLogin');
    const loginBox = getSelector('.login-box');
    const signBox = getSelector('.sign-box');

    if (toSignBtn && toLoginBtn && loginBox && signBox) {
        toSignBtn.onclick = () => {
            loginBox.className += ' animate_login';
            signBox.className += ' animate_sign';
        };

        toLoginBtn.onclick = () => {
            loginBox.classList.remove('animate_login');
            signBox.classList.remove('animate_sign');
        };
    }
};

onMounted(() => {
    containerShow();
    setupToggle();
});


const props = defineProps({
  isLogin: Boolean,
  isAdmin: Boolean,
});

const emit = defineEmits(["update:isLogin", "update:isAdmin"]);

// 子组件内部修改值并通知父组件
function toggleLogin(value:boolean) {
  emit("update:isLogin", value); // 将修改后的值通知父组件
}

function toggleAdmin(value:boolean) {
  emit("update:isAdmin", value); // 将修改后的值通知父组件
}

</script>

<template>
    <div class="container">
        <div class="login-box">
            <div class="apple-btn login-apple">
                <li class="red-btn"></li>
                <li class="yellow-btn"></li>
                <li class="green-btn"></li>
            </div>
            <div class="title">进入你的账户</div>
            <div class="input">
                <input type="text" id="userName" v-model="userName" placeholder="<用户名>" @keyup.enter="login">
            </div>
            <div class="input">
                <input type="password" id="password" v-model="password" placeholder="<密码>" @keyup.enter="login">
            </div>
            <div class="btn" @click="login">
                <a>登录
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </a>

            </div>
            <div class="change-box login-change">
                <div class="change-btn toSign">
                    <span>去注册</span>
                </div>
            </div>
        </div>

        <div class="sign-box">
            <div class="apple-btn sign-apple">
                <li class="red-btn"></li>
                <li class="yellow-btn"></li>
                <li class="green-btn"></li>
            </div>
            <div class="title">获取一个账户</div>
            <div class="input">
                <input type="text" id="signupUserName" v-model="signupUserName" placeholder="Have A Good Name?" @keyup.enter="register">
            </div>
            <div class="input">
                <input type="password" id="signupPassword" v-model="signupPassword" placeholder="Keep Secret!" @keyup.enter="register">
            </div>
            <div class="btn" @click="register">
                <a>注册
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </a>

            </div>
            <div class="change-box sign-change">
                <div class="change-btn toLogin">
                    <span>去登陆</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.container {
    position: absolute;
    height: 50vh;
    width: 45vw;
    background-color: rgba(255, 255, 255, .9);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(20, 132, 237, 0.8);
    border: 1px solid rgba(20, 132, 237, 1);
    overflow: hidden;
    box-sizing: border-box;
    opacity: 1;
    transition: 1s;
}

.container-show {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.container:hover .title {
    font-size: 20px;
    /* transform: translate(0,-30%); */
}

.container:hover input {
    transform: translate(0, -30%);
}

.container:hover .change-box {
    height: 200px;
}

.container:hover .change-btn {
    display: block;
}

.title {
    margin-top: 10px;
    position: relative;
    height: 40px;
    width: 100%;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 3px;
    transition: .4s;
}

.login-box {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(6, 33, 101, 0.723);
    transition: .4s;
    z-index: 1;
    transform-origin: 0 100%;
}

.login-box .title {
    color: white;
    text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
}

.input {
    width: 400px;
    height: 45px;
    position: relative;
    margin: 40px auto;
}

input {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 15px;
    font-size: 16px;
    background-color: rgba(8, 60, 180, 0.605);
    border-radius: 45px;
    transition: .4s;
}

.login-box input:focus {
    box-shadow: 0 0 10px rgba(1, 1, 1, .8);
}

.btn {
    position: relative;
    margin: -10px auto;
    width: 6.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .4s;
}

.change-box {
    position: absolute;
    height: 0px;
    width: 100%;
    clip-path: polygon(100% 50%, 50% 100%, 100% 100%);
    bottom: 0px;
    transition: .4s;
}

.change-btn {
    position: absolute;
    bottom: 30px;
    right: 40px;
    font-size: 20px;
    display: none;
    font-weight: 500;
}

.change-btn:hover {
    text-shadow: 0px 0px 3px rgba(200, 200, 200, .8);
    cursor: pointer;
}

.login-box input {
    caret-color: white;
    color: rgba(255, 255, 255, 0.8);
}


.login-change {
    background-color: rgba(255, 255, 255, .8);
}

.animate_login {
    transform: rotate(-90deg);
}

.animate_sign {
    transform: rotate(0deg) !important;
}






/* 注册框样式 */
.sign-box {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(131, 131, 131, 0.63);
    transform-origin: 0 100%;
    transform: rotate(90deg);
    transition: .4s;
    z-index: 1;
}

.sign-box .title {
    text-shadow: 0 0 10px rgba(200, 200, 200, .8);
    font-weight: 500;
}

.sign-change {
    background-color: rgba(6, 33, 101, 0.723);
}

.toLogin {
    color: white;
}

.sign-box input {
    box-shadow: 0 0 3px black;
    caret-color: white;
    color: rgba(255, 255, 255, 0.8);
}

.sign-box .btn {
    color: #1e90ff;
    background-color: rgba(200, 200, 200, .1);
    transition: .5s;
}




/* Mac 按钮样式及特效 */
.apple-btn {
    position: absolute;
    height: 15px;
    width: 65px;
    top: 3px;

}

.apple-btn li {
    list-style: none;
    position: relative;
    height: 15px;
    width: 15px;
    border-radius: 15px;
    opacity: 0;
}

.login-apple li {
    left: 5px;
    float: left;
}

.sign-apple li {
    right: 5px;
    float: right;
}

.sign-apple {
    right: 5px;
}

li:nth-child(2) {
    margin: 0px 2px
}

.red-btn {
    background-color: red;
    transition: .3s;
    transform: translate(0, -50%);
}

.yellow-btn {
    background-color: orange;
    /* transition-delay: .2s; */
    transition: .6s;
    transform: translate(0, -50%);
}

.green-btn {
    background-color: rgb(15, 136, 15);
    /* transition-delay: .3s; */
    transition: .9s;
    transform: translate(0, -50%);
}

.container:hover .red-btn {
    opacity: 1;
    transform: translate(0, 0);
}

.container:hover .yellow-btn {
    opacity: 1;
    transform: translate(0, 0);
}

.container:hover .green-btn {
    opacity: 1;
    transform: translate(0, 0);
}

.btn a {
    overflow: hidden;
    position: relative;
    padding: 1vw 2vw;
    color: #03e9f4;
    /* 取消a表现原有的下划线 */
    text-decoration: none;
    /* 同样加个过渡 */
    transition: all 0.5s;
}

.btn a:hover {
    color: #fff;
    border-radius: 5px;
    background-color: #03e9f4;
    box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
        0 0 100px #03e9f4;
}

.btn a span {
    position: absolute;
}

.btn a span:first-child {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    /* to right 就是往右边 下面的同理 */
    background: linear-gradient(to right, transparent, #03e9f4);
    /* 动画 名称 时长 linear是匀速运动 infinite是无限次运动 */
    animation: move1 1s linear infinite;
}

.btn a span:nth-child(2) {
    right: 0;
    top: -100%;
    width: 2px;
    height: 100%;
    background: linear-gradient(transparent, #03e9f4);
    /* 这里多了个0.25s其实是延迟时间 */
    animation: move2 1s linear 0.25s infinite;
}

.btn a span:nth-child(3) {
    right: -100%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, transparent, #03e9f4);
    animation: move3 1s linear 0.5s infinite;
}

.btn a span:last-child {
    left: 0;
    bottom: -100%;
    width: 2px;
    height: 100%;
    background: linear-gradient(#03e9f4, transparent);
    animation: move4 1s linear 0.75s infinite;
}

@keyframes move1 {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

@keyframes move2 {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

@keyframes move3 {
    0% {
        right: -100%;
    }

    50%,
    100% {
        right: 100%;
    }
}

@keyframes move4 {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}
</style>